<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    
    <title>挑战垃圾分类-看看你是学霸还是学渣</title>
	<link rel="stylesheet" type="text/css" href="static/css/style.css"/>
	<link rel="stylesheet" href="static/css/animate.css">
	<script>
		// 存储
		localStorage.setItem("answer", 0);
	</script>
  </head>
  <body>
			<!-- <audio controls="controls" style="display: none" autoplay="autoplay">
		
					<source src="static/5b0f90b8da980.mp3" type="audio/mpeg" />
				Your browser does not support the audio element.
				</audio> -->

			
    <div id="app">
			<!-- <a href="grade5.html" target="_blank">新窗口打开</a> -->
			
		<div class="wrapper">
			<div style="position:absolute;top:20px;left:20px;">	<img src="static/images/P1/logos.png" alt="" width="30%"/></div>
			<div style="height: 20px;"></div>
			<div class="title animated bounceInDown">
				<img src="static/images/P1/title.png" alt="" width="100%"/>
			</div>
			<p class="sub_title animated bounceInUp">
				<img src="static/images/P1/title_sub.png" alt="" width="100%"/>
			</p>
			<div class="barrage">
				<ul>
					<!-- <li><img src="static/images/P1/p01.png" alt="全国垃圾分类统一考卷:" width="auto"/></li>
					<li><img src="static/images/P1/p02.png" alt="这是干垃圾，还是湿垃圾" width="auto"/></li>
					<li><img src="static/images/P1/p03.png" alt="猪已经吃不下了" width="auto"/></li>
					<li><img src="static/images/P1/p04.png" alt="让我瞧瞧你是哪个垃圾" width="auto"/></li>
					<li><img src="static/images/P1/p05.png" alt="上海人民需要帮助" width="auto"/></li> -->
				</ul>
			</div>
			<div class="game_logo animated bounceInUp delay-1s">
				<button class="testBtn"><a href="question1.html"><img src="static/images/P1/test_btn.png" alt="开始测试" width="100%"/></a></button>
			</div>
		</div>
	</div>
	<!-- <div class="musicPlay" style="display: none;">
			<audio id="voice" src="static/5b0f90b8da980.mp3" autoplay="autoplay"></audio>
	</div> -->
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="static/js/main.js"></script>
	<script>
            $(function(){
	// var voice = document.getElementById('voice');
  //       //调用 <audio> 元素提供的方法 play()
  //       voice.play();
  //       //判斷 WeixinJSBridge 是否存在
  //       if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
  //           voice.play();
  //       } else {
  //           //監聽客户端抛出事件"WeixinJSBridgeReady"
  //           if (document.addEventListener) {
  //               document.addEventListener("WeixinJSBridgeReady", function() {
  //                   voice.play();
  //               }, false);
  //           } else if (document.attachEvent) {
  //               document.attachEvent("WeixinJSBridgeReady", function() {
  //                   voice.play();
  //               });
  //               document.attachEvent("onWeixinJSBridgeReady", function() {
  //                   voice.play();
  //               });
  //           }
  //       }


                    //定义一个变量存储输入的字符串
                    $str = ['<img src="static/images/P1/p01.png" alt="全国垃圾分类统一考卷:" width="auto"/>',
							'<img src="static/images/P1/p02.png" alt="这是干垃圾，还是湿垃圾" width="auto"/>',
							'<img src="static/images/P1/p03.png" alt="猪已经吃不下了" width="auto"/>',
							'<img src="static/images/P1/p04.png" alt="让我瞧瞧你是哪个垃圾" width="auto"/>',
							'<img src="static/images/P1/p05.png" alt="上海人民需要帮助" width="auto"/>',
							'<img src="static/images/P1/s01.png" alt="上海人民需要帮助" width="auto"/>',
							'<img src="static/images/P1/s02.png" alt="上海人民需要帮助" width="auto"/>',
							'<img src="static/images/P1/s03.png" alt="上海人民需要帮助" width="auto"/>',
							'<img src="static/images/P1/s04.png" alt="上海人民需要帮助" width="auto"/>',
							'<img src="static/images/P1/s05.png" alt="上海人民需要帮助" width="auto"/>',
							'<img src="static/images/P1/s06.png" alt="上海人民需要帮助" width="auto"/>',
							'<img src="static/images/P1/p01.png" alt="全国垃圾分类统一考卷:" width="auto"/>',
							'<img src="static/images/P1/p02.png" alt="这是干垃圾，还是湿垃圾" width="auto"/>',
							'<img src="static/images/P1/p03.png" alt="猪已经吃不下了" width="auto"/>',
							'<img src="static/images/P1/p04.png" alt="让我瞧瞧你是哪个垃圾" width="auto"/>',
							'<img src="static/images/P1/p05.png" alt="上海人民需要帮助" width="auto"/>'
						];
					function runBarrage(){
						 //定义一个变量用来存储top值。最小值是0，最大值是600.
	                    $top = Math.random() * 110;
						$random = Math.floor(Math.random()*16);
	                    //为span设置随机的速度,最快速度为2000.
	                    $speed = Math.random() * 10000 + 2000;
	                    //创建span节点追加到div中
	                    $("<li></li>").appendTo(".barrage ul").append($str[$random]).addClass("li").siblings().removeClass("li");
	                    //获取span的宽度
	                    $wid = $(".li").width();
						$screen_wid = $(window).width();
						console.log($wid);
	                    //设置样式
	                    $(".li").css({"top":$top,"right":-$wid});
	                    //设置目的地、速度、运动方式、回调函数。
	                    $(".li").animate({"left":-$wid-$screen_wid},$speed,"linear",function(){
							$(this).remove();
						});
					}
					setInterval(function(){
						runBarrage();
					},2000)
                   
            })
        </script>



  </body>
</html>
